<template>
  <div>
    <!-- 顶部蓝色navbar导航栏 -->
    <van-nav-bar title="黑马程序员.vant">
      <template #left>
        <div class="returnicon" @click="houtui">
          <van-icon name="arrow-left" color="#fff" size="18px" />返回
        </div>
      </template>
    </van-nav-bar>
    <!-- 内容布局 -->
    <div v-for="item in newscontentlist" :key="item.id" class="bigBox">
      <h3 class="bigtitle">{{item.title}}</h3>
      <div class="xiaocon">
        <span>发表时间：{{item.add_time.substring(0,10)}}</span>
        <span>点击次数：{{item.click}}</span>
      </div>

      <!-- 文章内容 -->
      <div v-html="item.content"></div>
      <!-- 发表评论 -->
      <div>
        <div class="pinglunde">
          <h4 class="viewtitle">发表评论</h4>
        </div>

        <van-cell-group>
          <van-cell>
            <van-field
              v-model="addInfo.content"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入留言"
            />
          </van-cell>
        </van-cell-group>

        <!-- 发表评论按钮 -->
        <van-button type="info" block @click="reportView">发表评论</van-button>

        <!-- 评论的内容 -->
        <van-list>
          <van-cell v-for="(item,index) in viewlist" :key="index">
            <span>第{{index+1}}楼 {{item.user_name}} {{item.add_time.substring(0,10)}}</span>
            <br />
            <span>{{item.content}}</span>
          </van-cell>
        </van-list>
        <van-button plain hairline type="primary" size="large" class="zuihou" @click="addPage">点击加载</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        artid: '',
        pageindex: 1
      },
      newscontentlist: [],
      addInfo: {
        id: 24,
        content: ''
      },
      viewlist: [],
      error: false,
      loading: false
    };
  },
  created() {
    this.getNewsContent();
    this.getreport();
  },
  methods: {
    async getNewsContent() {
      const data = await this.$http.get('/api/getnew/' + this.$route.params.detailid, {
        params: this.queryInfo
      });
      console.log(data);
      this.newscontentlist = data.message;
    },
    houtui() {
      this.$router.push('/newslist');
    },
    async getreport() {
      const data = await this.$http.get('/api/getcomments/' + this.$route.params.detailid, {
        params: this.queryInfo
      });
      console.log(data);
      this.viewlist = data.message;
    },
    async reportView() {
      if(this.addInfo.content.length === 0){
       return false
     }
      const data = await this.$http.post('/api/postcomment/' + this.$route.params.detailid, this.addInfo);
      console.log(data);
     
      this.getreport();
      this.addInfo.content = '';
    },
    addPage() {
      this.queryInfo.pageindex++;
      this.getreport();
    }
  }
};
</script>

<style scoped>
.xiaocon {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #1989fa;
  border-bottom: 1px solid #ccc;
  padding: 7px 0;
}
.bigtitle {
  color: #1989fa;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  margin: 0;
  padding: 5px 0;
}
.bigBox {
  margin: 0 10px;
}
.viewtitle {
  margin: 21px 0;
}
.van-cell-group {
  margin-top: 10px;
  border: 1px solid #ccc;
}
.pinglunde {
  border-bottom: 1px solid #000;
  color: #000;
}
.van-cell {
  margin-bottom: 20px;
}
.zuihou {
  margin: 0 0 30px 0;
}
</style>
